<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/page/common/taglib.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>产品信息</title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
   
	 <link href="/css/main/font-awesome.min.css" rel="stylesheet" type="text/css" >
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/css/main/datepicker.css" rel="stylesheet" type="text/css">
    <link href="/css/main/style.css" rel="stylesheet">
 
	<script src="/js/jquery.min.js"></script>
	<script src="/js/jquery-migrate-1.4.1.min.js"></script>
	<script src="/js/jquery.easing.1.3.js"></script>
    <script src="/js/bootstrap.min.js"></script>
	<script src="/js/swiper.min.js"></script>
	<script src="/js/main.js"></script>
	<script src="/js/map.js"></script>
	
	<script type="text/javascript" >
	
	  var m = new Map();

      function display (obj) {
    	  
    	  var id = obj.id;
    	  
    	  var name = id.substring(0,id.lastIndexOf("_"));
    	  
    	  var attributeid = id.substring(id.lastIndexOf("_")+1);
    	  
    	  cancel(name);
    	  
    	  var obj = document.getElementById(id);
    	  
    	  obj.style.backgroundColor="blue";
    	  
    	  m.put(name,attributeid);
    	  
      }
      
      function cancel(name) {
    	  
    	  m.remove(name);
    	  
    	  var items = document.getElementsByName(name)
    	  
    	  for (var i =0;i<items.length;i++) {
    		  
    		  items[i].style.backgroundColor="#FFFFFF";
    	  }
    	
      }
      
      function cancelAll () {
    	  
 		var items = document.getElementsByTagName("span")
    	  
    	  for (var i =0;i<items.length;i++) {
    		  
    		  items[i].style.backgroundColor="#FFFFFF";
    	  }
 		
 		 //清空整个集合
 		 var keys = m.entrys();

 		 for (var i=0;i<keys.length;i++) {
 			m.remove(keys[i].key);
 	     }

      }
      
      //筛选查询
      function searchInfo(id){
    	  
    	  var values = m.entrys();
    	  
    	  var str = "";
    	  
    	  for (var i=0;i<values.length;i++) {
    		  
    		   str += m.get(values[i].key)+",";
    	  }
    	  
    	  
    	  str = str.substring(0,str.lastIndexOf(","));
    	  
    	 // alert("values====="+str);
    	  
    	  window.location = "/product/search?id="+id+"&values="+str;
    	  
      }
      
      //分頁使用到的查询
      function pageSearch(currentPage){
    	  
		  var values = m.entrys();
    	  
    	  var str = "";
    	  
    	  for (var i=0;i<values.length;i++) {
    		  
    		   str += m.get(values[i].key)+",";
    	  }
    	  
    	  
    	  str = str.substring(0,str.lastIndexOf(","));
    	  
    	  window.location = "/product/search?id="+id+"&values="+str+"& currentPage="+currentPage;  
      }
      
      //初始化方法
      
      function init() {
    	
    	 var str = '${str}';
    	 
    	if (str == null || str == "") {
    		
    		return;
    	}  
    	  
		var items = document.getElementsByTagName("span")
    	  
    	for (var i =0;i<items.length;i++) {
    		
    		  var attid = items[i].id;
    		  
    		  var name = attid.substring(0,attid.lastIndexOf("_"));
        	  
        	  var attributeid = attid.substring(attid.lastIndexOf("_")+1);
    		  
    		  if (str.indexOf(attributeid) != -1) {
    			  
    			  items[i].style.backgroundColor="blue"; 
    		  }
    		  
    		  m.put(name,attributeid);
    	 }
    	  
      }
      

</script>
	
	
  </head>

<body onload="init()">

<jsp:include page="/WEB-INF/page/common/Head.jsp"/>

<div class="box_in cxt">

     <div><a href="">产品搜索</a> </div>

     <h4>符合条件的记录数:${pageview.total}</h4>

     <div class="msg"><p>点击一个值，即可选取该值。</p>

     </div>
     <div class="sel_list">
         <div class="seach">
            <input class="pull-left" type="text" name="" placeholder="在结果中搜索">
            <a class="pull-left a_btn" href="javascript:void(0)"><i class="fa fa-search"></i></a></i>
            <div class="clearfix"></div>
         </div>
         <!--all-->
         <div class="all">
         <div class="long">
             <ul>
             
               <c:forEach var="item" items="${attList}">
                <li class="pull-left">
                    <p>${item.attribute}</p>
                    <div class="name_list">
                      <c:forEach var="subitem" items="${item.values}"> 
                       <span id="item_${item.attributeId}_${subitem.id}" name="item_${item.attributeId}" onclick="display(this)">${subitem.valueStr}</span>
                      </c:forEach> 
                    </div>
                </li>
              </c:forEach>  
                <div class="clearfix"></div>
             </ul>
          </div>
         </div>
         <!--/all-->
         <!--a_list-->
         <div class="a_list"><a class="a_btn pull-left" href="javascript:void(0)" onclick="cancelAll();">清除已选零件</a>
                 <a class="a_btn pull-left" href="javascript:void(0)" onclick="searchInfo(${id});">应用筛选程序</a>
                 <div class="clearfix"></div>
         </div>
         <!--/a_list-->
     </div>
    <!--table-->
    <div class="tip_red">点击商品名称进入商品详情</div>
     <div class="goods_table">
          <table class="table table-bordered table-hover">
              <thead>
                 <tr>
                    <th width="4%">商品名称</th>
                    <th width="4%">规格书</th>
                    <th width="2%">图片</th>
                    <th width="4%">制造商</th>
                    <th width="6%">描述</th>
                    <th width="4%">傲佑编号</th>
                    <th width="2%">库存数量</th>
                    <th width="2%">最低价格</th>
                    <th width="3%">最小购买量</th>
<!--                     <th width="6%">尺寸</th> -->
<!--                     <th width="6%">高度</th> -->
<!--                     <th width="5%">安装类型</th> -->
<!--                     <th width="4%">电阻材料</th> -->
<!--                     <th width="4%">调节类型</th> -->
<!--                     <th width="4%">圈数</th> -->
<!--                     <th width="4%">温度系数</th> -->
<!--                     <th width="4%">电阻</th> -->
<!--                     <th width="4%">系列</th> -->
<!--                     <th width="4%">包装</th> -->
<!--                     <th width="4%">引出方式</th> -->
<!--                     <th width="4%">直径</th> -->
<!--                     <th width="4%">工作温度</th> -->
<!--                     <th width="4%">功率</th> -->
                 </tr>
              </thead>
              <tbody>
               <c:forEach var="pitem" items="${pageview.list}">
                 <tr>
                    <td><a href="/product/productDetail?pid=${pitem.id}">${pitem.productName}</a></td>
                    <td><a herf="${pitem.specification}">下载</a></td>
                    <td><img src="${pitem.imageUrl1}" width="40px" height="40px"></td>
                    <td>${pitem.brand.brandName}</td>
                    <td>
                       <c:if test="${pitem.saleStatus == 0}">回收站</c:if>
                       <c:if test="${pitem.saleStatus == 1}">出售中</c:if>
                       <c:if test="${pitem.saleStatus == 2}">下架区</c:if>
                       <c:if test="${pitem.saleStatus == 3}">仓库中</c:if>
                    </td>
                    <td>${pitem.description}</td>
                    <td>${pitem.productCode}</td>
                    <td> 1</td>
                    <td>${pitem.minBuyNum}</td>
<%--                     <td>${pitem.minBuyNum}</td> --%>
<!--                     <td> 1</td> -->
<!--                     <td> 1</td> -->
<!--                     <td> 1</td> -->
<!--                     <td> 1</td> -->
<!--                     <td> 1</td> -->
<!--                     <td> 1</td> -->
<!--                     <td> 1</td> -->
<!--                     <td> 1</td> -->
<!--                     <td> 1</td> -->
<!--                     <td> 1</td> -->
<!--                     <td> 1</td> -->
                 </tr>
                </c:forEach>
              </tbody>
          </table>
          </div>
    <!--/table-->
    
    <!--paging-->
            <div class="paging pull-right">
              <nav aria-label="Page navigation pull-left">
                  <ul class="pagination">
                   
                    <li>
                      
                   <c:if test="${pageview.hasPreviousPage == true}">
                       <a href="javascript:void(0)" onclick="pageSearch(${pageview.prePage})" aria-label="上一页">
                    </c:if>
                    
                    <c:if test="${pageview.hasPreviousPage == false}">
                       <a href="#" aria-label="上一页">
                    </c:if>
                     
                      <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    
                    <c:forEach var="num" items="${pageview.navigatepageNums}">
                       <li><a href="javascript:void(0)" onclick="pageSearch(${num})"><c:out value="${num}" /></a></li>
                    </c:forEach>
                    
                    <li>
                    
                     <c:if test="${pageview.hasNextPage == true}">
                          <a href="javascript:void(0)" onclick="pageSearch(${pageview.nextPage})" aria-label="下一页">
                          <span aria-hidden="true">&raquo;</span>
                      </a>
                     </c:if>
                    
                    <c:if test="${pageview.hasNextPage == false}">
                          <a href="#" aria-label="下一页">
                          <span aria-hidden="true">&raquo;</span>
                      </a>
                     </c:if>
                    
                     
                    </li>
                  </ul>
                   <div class="all_page pull-right">
                    第${pageview.pageNum}/${pageview.pages}页 共${pageview.total}记录<input class="page_number" type="text">页
                    <input class="sure blue_a" type="button" onclick="pageSearch(this.value)" value="确定" name="">
                   </div>
                   <div class="clearfix"></div>
                </nav>
              </div>
          <!--/paging-->
      </div>
  </div>
  <!--box-->
  
</body>

<script>
    var widthLong=$(".cxt .long ul").width();
    var heightLong=$(".cxt .long ul").height();
    $(".cxt .long").css({"width":widthLong+30+"px","height":heightLong+10+"px"});
  </script>


</html>